.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-5 {
  margin-top: 20px;
}

.mt-6 {
  margin-top: 24px;
}

.mt-7 {
  margin-top: 28px;
}

.mt-8 {
  margin-top: 32px;
}

.mt-9 {
  margin-top: 36px;
}

.mt-10 {
  margin-top: 40px;
}

.mr-1 {
  margin-right: 4px;
}

.mr-2 {
  margin-right: 8px;
}

.mr-3 {
  margin-right: 12px;
}

.mr-4 {
  margin-right: 16px;
}

.mr-5 {
  margin-right: 20px;
}

.mr-6 {
  margin-right: 24px;
}

.mr-7 {
  margin-right: 28px;
}

.mr-8 {
  margin-right: 32px;
}

.mr-9 {
  margin-right: 36px;
}

.mr-10 {
  margin-right: 40px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-3 {
  margin-bottom: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-5 {
  margin-bottom: 20px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mb-7 {
  margin-bottom: 28px !important;
}

.mb-8 {
  margin-bottom: 32px;
}

.mb-9 {
  margin-bottom: 36px;
}

.mb-10 {
  margin-bottom: 40px;
}

.ml-1 {
  margin-left: 4px;
}

.ml-2 {
  margin-left: 8px;
}

.ml-3 {
  margin-left: 12px;
}

.ml-4 {
  margin-left: 16px;
}

.ml-5 {
  margin-left: 20px;
}

.ml-6 {
  margin-left: 24px;
}

.ml-7 {
  margin-left: 28px;
}

.ml-8 {
  margin-left: 32px;
}

.ml-9 {
  margin-left: 36px;
}

.ml-10 {
  margin-left: 40px;
}

.pt-1 {
  padding-top: 4px;
}

.pt-2 {
  padding-top: 8px;
}

.pt-3 {
  padding-top: 12px;
}

.pt-4 {
  padding-top: 16px;
}

.pt-5 {
  padding-top: 20px;
}

.pt-6 {
  padding-top: 24px;
}

.pt-7 {
  padding-top: 28px;
}

.pt-8 {
  padding-top: 32px;
}

.pt-9 {
  padding-top: 36px;
}

.pt-10 {
  padding-top: 40px;
}

.pr-1 {
  padding-right: 4px;
}

.pr-2 {
  padding-right: 8px;
}

.pr-3 {
  padding-right: 12px;
}

.pr-4 {
  padding-right: 16px;
}

.pr-5 {
  padding-right: 20px;
}

.pr-6 {
  padding-right: 24px;
}

.pr-7 {
  padding-right: 28px;
}

.pr-8 {
  padding-right: 32px;
}

.pr-9 {
  padding-right: 36px;
}

.pr-10 {
  padding-right: 40px;
}

.pb-1 {
  padding-bottom: 4px;
}

.pb-2 {
  padding-bottom: 8px;
}

.pb-3 {
  padding-bottom: 12px;
}

.pb-4 {
  padding-bottom: 16px;
}

.pb-5 {
  padding-bottom: 20px;
}

.pb-6 {
  padding-bottom: 24px;
}

.pb-7 {
  padding-bottom: 28px;
}

.pb-8 {
  padding-bottom: 32px;
}

.pb-9 {
  padding-bottom: 36px;
}

.pb-10 {
  padding-bottom: 40px;
}

.pl-1 {
  padding-left: 4px;
}

.pl-2 {
  padding-left: 8px;
}

.pl-3 {
  padding-left: 12px;
}

.pl-4 {
  padding-left: 16px;
}

.pl-5 {
  padding-left: 20px;
}

.pl-6 {
  padding-left: 24px;
}

.pl-7 {
  padding-left: 28px;
}

.pl-8 {
  padding-left: 32px;
}

.pl-9 {
  padding-left: 36px;
}

.pl-10 {
  padding-left: 40px;
}

.flex {
  display: flex;
}

.flex1{
  flex: 1;
}

.flex-align-center {
  align-items: center;
  align-content: center;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-stretch{
  align-items: stretch;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-justify-content-around {
  justify-content: space-around;
}

.flex-justify-content-between {
  justify-content: space-between;
}

.flex-justify-content-strat {
  justify-content: flex-start;
}

.flex-justify-content-end {
  justify-content: flex-end;
}

.flex-justify-content-center {
  justify-content: center;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-wrap{
  flex-wrap: wrap;
}

.grid{
  display: grid;
}

.float-left {
  float: left;
}

.float-righ {
  float: right;
}

.clearfloat {
  position: relative;
}

.clearfloat::after {
  position: absolute;
  clear: both;
  content: '';
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.text-align-right {
  text-align: right;
}

.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.font-12 {
  font-size: 12px;
}

.font-13 {
  font-size: 13px;
}

.font-14 {
  font-size: 14px;
}

.font-15 {
  font-size: 15px;
}

.font-16 {
  font-size: 16px;
}

.font-17 {
  font-size: 17px;
}

.font-18 {
  font-size: 18px;
}

.font-19 {
  font-size: 19px;
}

.font-20 {
  font-size: 20px;
}

//字符串省略
.text-hidden-one {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-hidden-two {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  /*! autoprefixer: off; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}

.text-hidden-three {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  /*! autoprefixer: off; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 这里是超出几行省略 */
  overflow: hidden;
}

//强制换行
.work-break {
  word-break: break-all;
}

//隐藏滚动条
.noScrollBar-y {
  overflow: hidden;
  overflow-y: scroll;
}

.noScrollBar-y::-webkit-scrollbar {
  display: none;
}

.noScrollBar-x {
  overflow: hidden;
  overflow-x: scroll;
}

.noScrollBar-x::-webkit-scrollbar {
  display: none;
}

.pointer{
  cursor: pointer;
}

//
//* { //全局动画
//    box-sizing: border-box;
//    animation-duration: .3s;
//    --animate-duration: .3s;
//    transition: all .3s;
//    background-size: contain;
//    background-repeat: no-repeat;
//}
//盒子居中的方法

.btn-baseStyle{
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

.btn-baseStyle-border{
  border: 1px solid #dcdfe6;
  color: $base-font-color;
  background-color: white;
}

.btn-Primary{
 background-color: #2984FF;
}

.btn-baseStyle:active{
  opacity: 0.8;
}
.width100{
  width: 100%;
}

.item-space{
  background-color: white;
  border-radius: 10px;
}

.wholeTitle {
  color: rgba(64, 64, 64, 1) !important;
  font-size: 22px;
  font-weight: bold;
}

.headerRight {
  border-radius: 5px;
  border: 1px solid rgba(22, 132, 252, 1);
  .headerRight-text {
    font-size: 16px;
    width: 140px;
    color: rgba(22, 132, 252, 1);
    background-color: white;
    padding: 5px 0;
    border-right: 1px solid rgba(22, 132, 252, 1);
  }

  .active {
    background-color: rgba(22, 132, 252, 1);
    border: 1px solid rgba(22, 132, 252, 1);
    color: white;
  }


  .headerRight-text:nth-child(1) {
    border-radius: 5px 0 0 5px;
  }

  .headerRight-text:last-child {
    border-right: none;
    border-radius: 0 5px 5px 0;
  }
}

.borderBottom {
  padding: 15px 0 20px 20px;
  border-bottom: 1px solid #BBBBBB;
}

.content{
  padding: 25px;
}

.tableScopeText {
  color: #3177EC;
  font-size: 16px;
}
